<!-- home -->
<template>
  <div>
    <div class="nav_box">
      <NavBar
        right-text="按钮"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
        ><template #right>
          <div class="nav_icons">
            <img class="icon_img" src="@/assets/imgs/shoucang.png" alt="" />
            <img
              class="icon_img"
              style="margin: 0 14px"
              src="@/assets/imgs/fenxiang.png"
              alt=""
            />
            <img class="icon_img" src="@/assets/imgs/gengduo.png" alt="" />
          </div> </template
      ></NavBar>
    </div>
    <div class="msg_head">
      <div class="msg_info_top">
        <img :src="details.pic" class="head_img" alt="" />
        <div class="name">
          {{ details.name }}
        </div>
      </div>
      <div class="type_imgs">
        <img
          v-for="(item, index) in 4"
          :key="index"
          :src="require('../../assets/imgs/type' + index + '.png')"
          class="icon_img"
          alt=""
        />
      </div>
      <div class="time_box">
        <van-cell is-link>
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #title>
            <div class="time_left">
              <img src="@/assets/imgs/time.png" class="time_icon" alt="" />
              <span>{{ isBusiness[details.openState] }}</span>
              <span style="color: #d8d8d8; margin: 0 5.5px"> | </span>
              <span> {{ details.openHours }} </span>
            </div>
          </template>
        </van-cell>
      </div>
      <div class="time_box">
        <van-cell is-link>
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #title>
            <div class="time_left">
              <img
                style="width: 21.5px; height: 24px"
                src="@/assets/imgs/dingwei.png"
                class="time_icon"
                alt=""
              />
              <div>
                <div class="site_title">
                  {{ details.location }}
                </div>
                <div class="site_time">{{ details.landmark }}</div>
              </div>
            </div>
          </template>
          <template #right-icon>
            <div class="time_left">
              <img src="@/assets/imgs/daohang.png" class="navigation" alt="" />
            </div>
          </template>
        </van-cell>
      </div>
    </div>
    <div class="menu_list_box">
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item
          :title="item.name"
          v-for="item in details.contentInfo"
          :key="item.id"
        />
      </van-sidebar>
      <div class="menu_right">
        <div v-for="item in details.contentInfo" :key="item.id">
          <van-cell is-link :value="item.more || '更多'">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #title>
              <div class="time_left">
                <img
                  src="@/assets/imgs/goodicon.png"
                  class="good_icon"
                  alt=""
                />
                <span>{{ item.name }}</span>
              </div>
            </template>
          </van-cell>
          <menuList
            :itemCh="item.list"
            :type="item.type"
            :content="item.content"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { api } from '@/config'
import { Button } from "vant";
import { NavBar } from "vant";
import axios from "axios";
import menuList from "../../components/menuList.vue";
export default {
  components: {
    NavBar,
    menuList,
  },

  data() {
    return {
      activeKey: 0,
      isBusiness: ["暂停营业", "营业中", "筹建中", "已关门"],
      details: {},
      // 1 商家活动 2 图片菜单 3 电子菜单 4价目表 5.本店热卖 6.评论 7.商家相册 8.主营产品 9商家推荐 10小图展示 11大图展示
    };
  },

  computed: {},

  mounted() {
    const that = this;
    const data = {
      baseVo: {
        cv: "",
        data: {
          cityId: "",
          contentId: "",
          name: "",
        },
        device: "",
        imei: "",
        imsi: "",
        netType: "",
        nonce: "",
        processorId: "",
        ua: "",
        uid: "",
        uuid: "",
      },
      details: {},
    };
    axios
      .post("http://47.93.85.224:86/v1/city/merchant/detail", data)
      .then(function (res) {
        console.log(res);
        if (res.data.status == 200) {
          that.details = res.data.data;
        } else {
          //失败
        }
      })
      .catch(function (error) {
        console.log(error);
      });
  },

  methods: {
    onChange(index) {},
    onClickLeft() {},
    onClickRight() {},
  },
};
</script>
<style lang='scss' >
.menu_list_box {
  display: flex;
  .van-sidebar-item--select::before {
    background: url("../../assets/imgs/menuicon.png");
    background-size: 100%;
    width: 9px;
    height: 36px;
  }
  .menu_right {
    height: 100vh;
    overflow: auto;
    width: 295px;
    .van-cell::after {
      transform: scaleY(0);
    }
    .van-cell {
      padding: 10px 0;
    }
    .time_left {
      display: flex;
      align-items: center;
    }
    .good_icon {
      width: 24px;
      height: 24px;
    }
  }
}

.time_box {
  border-bottom: 1px solid #ececec;
  &:last-child {
    border-bottom: 0;
  }
  .van-cell {
    padding: 10px 0;
  }
  .time_left {
    display: flex;
    align-items: center;
    .site_title {
      color: #333;
      font-size: 14px;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap;
    }
    .site_time {
      color: #bdbdbd;
      font-size: 12px;
    }
    .navigation {
      width: 62.5px;
      height: 31px;
    }
    .time_icon {
      width: 23px;
      height: 23px;
    }
    span {
      color: #333;
      font-size: 14px;
    }
  }
}

.msg_head {
  padding: 15px;
  box-sizing: border-box;
  margin-bottom: 10px;
  .type_imgs {
    display: flex;
    align-content: center;
    justify-content: space-between;
    margin-bottom: 10px;
    .icon_img {
      width: 80px;
      height: 20px;
    }
  }
  .msg_info_top {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    .head_img {
      width: 60px;
      height: 60px;
      box-shadow: 0px 0px 9px 2px rgba(114, 114, 131, 0.05);
      border-radius: 8px;
      margin-right: 9px;
    }
    .name {
      color: #333;
      font-size: 20px;
      width: 273px;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap;
    }
  }
}
.msg_head {
  width: 100%;
  // height: 214.5px;
  background-color: #fff;
  box-shadow: 0px 0px 9px 2px rgba(114, 114, 131, 0.05);
  border-radius: 18px 18px 0px 0px;
  margin-top: -64px;
}
.nav_box {
  height: 110px;
  background: linear-gradient(47deg, #04a7fb 0%, #1c6cf0 100%);
  // .van-nav-bar__content {
  //   background-color: rgba(0, 0, 0, 0);
  // }
  .van-nav-bar {
    background-color: transparent;
  }
  .van-hairline--bottom::after {
    border-bottom: 0;
  }
  .van-icon.van-icon-arrow-left.van-nav-bar__arrow {
    color: #fff;
  }
  .nav_icons {
    display: flex;
    align-items: center;

    .icon_img {
      width: 28px;
    }
  }
}
</style>
